<template>
  <div class="content-outer">
    <Block class="content-head">
      <BiForm>
        <!-- <BiFormItem label="订单号">
          <template slot="content">
            <el-input
              v-model="requestData.order_no"
              placeholder="请输入订单编号/订单渠道/用户ID"
            />
          </template>
        </BiFormItem> -->
        <div class="search-item ">
          <el-select
            v-model="orderTypeValue"
            class="select-label"
            style="width:100px;"
          >
            <el-option
              v-for="(item) in orderSelectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            > </el-option>
          </el-select>
          <div class="item-content selectContent">
            <el-input
              v-model="orderTypeLabel"
              clearable
              placeholder="请输入搜索内容"
            ></el-input>
          </div>
        </div>
        <miniAppSelect
          :is-resize="isResize"
          :reserve="false"
          :multiple="true"
          @result="miniAppResult"
        />
        <BiFormItem label="订单类型">
          <template slot="content">
            <el-select
              v-model="requestData.order_type"
              clearable
              placeholder="请选择订单类型"
            >
              <el-option
                v-for="item in orderTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </BiFormItem>
        <!-- <BiFormItem label="小程序类型">
          <template slot="content">
            <el-select
              v-model="requestData.app_type"
              clearable
              placeholder="请选择小程序类型"
            >
              <el-option
                v-for="item in appTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </BiFormItem> -->

        <!--
        <BiFormItem label="渠道首充订单">
          <template slot="content">
            <el-select
              v-model="requestData.channel_first_pay"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in channelOrderList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem label="渠道名称">
          <template slot="content">
            <el-select
              ref="channel"
              v-model="requestData.channel_id"
              remote
              clearable
              :remote-method="remoteMethod"
              filterable
              placeholder="请输入渠道ID/名称"
              @focus="mobileClearChannel"
              @hook:mounted="mobileClearChannel"
              @visible-change="mobileClearChannel"
            >
              <el-option
                v-for="item in channelList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem label="支付状态">
          <template slot="content">
            <el-select
              v-model="requestData.status"
              clearable
              placeholder="请选择支付状态"
            >
              <el-option
                v-for="item in orderStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </BiFormItem>
          <BiFormItem label="染色短剧">
          <template slot="content">
            <el-select
              ref="playlet_id"
              v-model="requestData.seq_playlet_id"
              filterable
              remote
              :remote-method="selectChange"
              clearable
              placeholder="请选择染色短剧"
              :loading="selectLoading"
              @focus="mobileClearplaylet"
              @hook:mounted="mobileClearplaylet"
              @visible-change="mobileClearplaylet"
            >
              <el-option
                v-for="item in playletList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </BiFormItem>
        <DateSelect
          label="染色时间"
          :is-resize="isResize"
          @result="resultDateSeq"
        />
        -->
        <!-- <BiFormItem label="项目">
          <template slot="content">
            <el-select
              v-model="requestData.weixin_blongs_id"
              clearable
              filterable
              collapse-tags
              multiple
              placeholder="请选择项目"
            >
              <el-option
                v-for="item in pigeonWeixinBelongsList"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </template>
        </BiFormItem> -->
        <BiFormItem label="支付方式">
          <template slot="content">
            <el-select
              v-model="requestData.pay_type"
              clearable
              collapse-tags
              multiple
              placeholder="请选择支付方式"
            >
              <el-option
                v-for="item in payTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </BiFormItem>
        <DateSelect
          label="下单时间"
          :default-value="[requestData.order_time_start,requestData.order_time_end]"
          :is-resize="isResize"
          @result="resultDate"
        />

        <div class="search-item ">
          <el-select
            v-model="playletTypeValue"
            class="select-label"
            style="width:110px;"
            @change="playletTypeChange"
          >
            <el-option
              v-for="(item) in playletTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            > </el-option>
          </el-select>
          <div
            v-if="playletTypeValue==='playlet'"
            class="item-content selectContent"
          >
            <selectPlaylet
              :type="playletTypeValue"
              :is-resize="isResize"
              :reserve="false"
              :multiple="true"
              :autoreset="true"
              @result="playletResult"
            />
          </div>
          <span
            v-else-if="playletTypeValue==='mainPlaylet'"
            class="item-content selectContent"
          >
            <selectPlaylet
              :type="playletTypeValue"
              :is-resize="isResize"
              :reserve="false"
              :autoreset="true"
              :multiple="true"
              @result="playletResult"
            />
          </span>
        </div>
        <BiFormItem label="内容方">
          <template slot="content">
            <selectPlaylet
              type="partnerAccount"
              :is-resize="isResize"
              :reserve="false"
              :autoreset="true"
              :multiple="true"
              @result="partnerAccountResult"
            />
          </template>
        </BiFormItem>
        <!-- <BiFormItem label="充值短剧">
          <template slot="content">
            <el-select
              ref="playlet_id"
              v-model="requestData.playlet_id"
              filterable
              multiple
              remote
              collapse-tags
              :remote-method="selectChange"
              clearable
              placeholder="请选择充值短剧"
              :loading="selectLoading"
              @focus="mobileClearplaylet"
              @hook:mounted="mobileClearplaylet"
              @visible-change="mobileClearplaylet"
            >
              <el-option
                v-for="item in playletList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </BiFormItem> -->
        <DateSelect
          label="支付完成时间"
          :default-value="[requestData.pay_time_start,requestData.pay_time_end]"
          :is-resize="isResize"
          @result="orderComplete"
        />

        <DateSelect
          label="退款时间"
          :default-value="[requestData.refund_time_start,requestData.refund_time_end]"
          :is-resize="isResize"
          @result="orderRefund"
        />
        <BiFormItem label="分销方">
          <template slot="content">
            <selectPlaylet
              type="distributor"
              :is-resize="isResize"
              :multiple="true"
              :reserve="false"
              :autoreset="true"
              @result="distributorResult"
            />
          </template>
        </BiFormItem>
        <BiFormItem>
          <template slot="button">
            <el-button
              style="margin-left: 10px"
              type="primary"
              :disabled="loading"
              :loading="loading"
              @click="startSearch"
            >查询</el-button>
            <el-button @click="reset">重置</el-button>
          </template>
        </BiFormItem>
      </BiForm>
    </Block>
    <Block class="content-table">
      <div class="action-box">
        <div class="left">
        </div>
        <div class="right">
          <div style="float:right;">
            <BiCustomColumn
              type=""
              column-name="refundOrder"
              :table-column="tableColums"
              :default-list="defaultColumnList"
              :default-column="defaultColumn"
              @handleTableColumn="setTableColumn"
            />
            <el-button
              style="margin-left:20px;"
              @click="exportList"
            >导出</el-button>
          </div>
        </div>
      </div>

      <div class="table-table">
        <BiTable
          :loading="loading"
          :data="tableData"
          size="medium"
          :column="tableColums"
          fixed="sticky"
          fixed-offset="50"
          pagination
          layout="total, prev, pager, next"
          :auto-scroll="false"
          :total="page_info.total"
          :page.sync="page_info.page"
          :show-summary="true"
          :summary-method="getSummaries"
          :limit.sync="page_info.page_size"
          @pagination="handlePageChange"
        >
          <template v-slot:mini_app_name="{ row }">
            <p>{{ row.mini_app_name }}
              <svg-icon
                v-if="row.app_type==1"
                icon-class="miniapp"
                class="imageIcon"
              />
              <svg-icon
                v-else
                icon-class="douyin"
                class="imageIcon"
              />
            </p>
            <p class="infoText">{{ row.mini_app_id }}</p>
          </template>
          <template v-slot:partner_account_export="{ row }">
            <div v-if="row.partner_account_name.length>0">
              <p
                v-for="(item,index) in row.partner_account_name"
                :key="index"
              >{{ item }}</p>
            </div>
          </template>
          <template v-slot:member_id="{ row }">
            <p
              style="cursor: pointer;color:#06C261"
              @click="showDetails(row)"
            >{{ row.member_id }}</p>
          </template>
          <!-- <template v-slot:channel_name="{ row }">
            <p>{{ row.channel_name }}</p>
            <p class="infoText">{{ row.channel_id }}</p>
          </template> -->
          <template v-slot:refund_status_title="{ row }">
            <div class="colorStatus">
              <p
                v-if="row.refund_status==1"
                class="indeter"
              >{{ row.refund_status_title }}</p>
              <p
                v-if="row.refund_status==2"
                class="success"
              >{{ row.refund_status_title }} </p>

              <div
                v-if="row.refund_status==3"
                class="rowFlex columnCenter"
              >
                <p class="fail">{{ row.refund_status_title }}
                </p>
                <el-popover
                  content="top"
                  effect="dark"
                  trigger="hover"
                >
                  <div class="content_text">
                    {{ row.message }}
                  </div>
                  <svg-icon
                    slot="reference"
                    style="margin-left:5px;cursor: pointer;"
                    icon-class="question"
                  />
                </el-popover>
              </div>

            </div>
          </template>
          <template v-slot:reason="{row}">
            <div v-if="row.reason.length<=20">
              {{ row.reason }}
            </div>
            <div
              v-else
              class="rowFlex columnCenter"
            >
              <el-popover
                placement="top"
                trigger="hover"
              >
                <div>
                  <p>{{ row.reason }}</p>
                </div>
                <div slot="reference">
                  {{ row.reason.substring(0,20) }}
                </div>
              </el-popover>
            </div>
          </template>
        </BiTable>
      </div>
    </Block>
    <BiDrawer
      v-model="drawer.visible"
      :row-info="drawer.row"
      drawer-title="用户详情"
      :component="userDetails"
      drawer-size="65%"
      @ok="onSubmit"
    ></BiDrawer>
  </div>
</template>

<script>
import { refundOrderList, exportData } from '@/api/order'
import { mapState, mapActions } from 'vuex'
import miniAppSelect from '@/common/component/form/miniAppSelect.vue'
import DateSelect from '@/common/component/form/dateSelect.vue'
import userDetails from '@/views/user/component/detailsLayer.vue'
import { commonData } from '@/api/common'
import { formatNumber } from '@/utils/index'
// 退款订单列表 退款状态 如果是退款失败后面加个问号  然后展示抖音测的退款失败原因
export default {
  name: 'Refund',
  components: {
    miniAppSelect,
    DateSelect
  },
  data() {
    return {
      formatNumber: formatNumber,
      defaultColumn: {
        left: [],
        center: ['mini_app_name', 'member_id', 'activity_title', 'blongs_name', 'weixin_blongs_id', 'order_no', 'trad_no', 'product_name', 'pay_type_title', 'merchant_id', 'order_time', 'amount', 'discount', 'coin', 'free_coin', 'pay_time', 'refund_time', 'refund_amount', 'refund_status', 'dy_refund_no', 'reason', 'playlet_title', 'main_playlet_title', 'chapter_title', 'operator', 'partner_account_export', 'distributor', 'prop_id', 'team_id'],
        right: []
      },
      orderSelectList: [
        { label: '订单编号', value: 'order_no' },
        { label: '交易单号', value: 'trad_no' },
        { label: '用户ID', value: 'member_id' }
      ],
      appTypeList: [
        { label: '全部', value: '' },
        { label: '微信小程序', value: '1' },
        { label: '抖音小程序', value: '2' }
      ],
      channelOrderList: [
        { label: '全部', value: '' },
        { label: '是', value: '1' },
        { label: '否', value: '0' }
      ],
      playletTypeList: [
        { label: '充值短剧', value: 'playlet' },
        { label: '充值合同', value: 'mainPlaylet' }
      ],
      orderTypeValue: 'order_no',
      playletTypeValue: 'mainPlaylet',
      orderTypeLabel: '',
      defaultColumnList: [
        {
          content: '分组1',
          status: true,
          children: [
            { name: 'mini_app_name', content: '小程序', status: true },
            { name: 'member_id', content: '用户ID', status: true },
            { name: 'blongs_name', content: '项目', status: true },
            { name: 'activity_title', content: '活动名/id', status: true },
            { name: 'order_no', content: '订单号', status: true },
            { name: 'trad_no', content: '交易单号', status: true },
            { name: 'distributor', content: '分销方', status: true },
            // { name: 'channel_name', content: '染色渠道', status: true },
            { name: 'product_name', content: '订单类型', status: true },
            { name: 'pay_type_title', content: '支付方式', status: true },
            { name: 'merchant_id', content: '商户号', status: true },
            { name: 'order_time', content: '下单时间', status: true },
            // { name: 'seq_time', content: '染色时间', status: true },
            { name: 'amount', content: '充值金额', status: true },
            { name: 'discount', content: '充值挽留', status: true },
            { name: 'coin', content: '喵币', status: true },
            { name: 'free_coin', content: '赠币', status: true },
            { name: 'pay_time', content: '支付完成时间', status: true },
            { name: 'refund_time', content: '退款时间', status: true },
            { name: 'refund_amount', content: '退款金额', status: true },
            { name: 'refund_status_title', content: '退款状态', status: true },
            { name: 'dy_refund_no', content: '退款单号', status: true },
            { name: 'reason', content: '退款原因', status: true },
            { name: 'playlet_title', content: '充值短剧', status: true },
            { name: 'main_playlet_title', content: '充值合同', status: true },
            { name: 'chapter_title', content: '充值剧集', status: true },
            { name: 'partner_account_export', content: '内容方', status: true },
            { name: 'operator', content: '操作人', status: true }
          ]
        }
      ],
      drawer: {
        visible: false,
        row: {},
        title: '用户详情'
      },
      showRefund: false,
      selectLoading: false,
      playletList: [],
      channelList: [],
      totalAmount: {},
      userDetails: userDetails,
      requestData: {
        order_no: [],
        trad_no: [],
        pay_time_start: '',
        pay_time_end: '',
        refund_time_start: '',
        refund_time_end: '',
        member_id: '',
        // app_type: '',
        pay_type: '',
        // seq_playlet_id: '',
        // channel_first_pay: '',
        mini_app_id: '',
        // status: '',
        // channel_id: '',
        order_type: '',
        partner_account_id: [],
        weixin_blongs_id: [],
        playlet_id: '',
        main_playlet_id: [],
        distributor_id: [],
        order_time_start: this.$moment().format('YYYY-MM-DD'),
        order_time_end: this.$moment().format('YYYY-MM-DD')
        // seq_time_start: '',
        // seq_time_end: ''
      },
      isResize: false,
      loading: false,
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      },
      tableData: [],
      tableColums: [
        // 退款订单列表 退款状态 如果是退款失败后面加个问号  然后展示抖音测的退款失败原因
        {
          label: '小程序',
          prop: 'mini_app_name',
          width: '150',
          slotScope: true
        },
        {
          label: '用户ID',
          prop: 'member_id',
          slotScope: true
        },
        {
          label: '项目',
          prop: 'blongs_name'
        },
        {
          label: '活动名称/ID',
          prop: 'activity_title',
          render: (h, { row }) => {
            if (row.activity_title) {
              return <span>{row.activity_title}</span>
            } else {
              return <span>-</span>
            }
          },
          width: '140'
        },
        {
          label: '分销方',
          prop: 'distributor'
        },
        {
          label: '订单号',
          prop: 'order_no',
          width: '160'
        },
        {
          label: '交易单号',
          prop: 'trad_no',
          width: '160'
        },
        // {
        //   label: '染色渠道',
        //   prop: 'channel_name',
        //   width: '200',
        //   slotScope: true
        // },
        {
          label: '订单类型',
          prop: 'product_name',
          width: '100'
        },
        {
          label: '支付方式',
          prop: 'pay_type_title'
        },
        {
          label: '商户号',
          prop: 'merchant_id',
          width: '120'
        },
        {
          label: '下单时间',
          prop: 'order_time',
          width: '120',
          render: (h, { row }) => {
            if (row.order_time) {
              return (
                <span>
                  <p>{row.order_time.split(' ')[0] || ''}</p>
                  <p>{row.order_time.split(' ')[1] || ''}</p>
                </span>
              )
            }
          }
        },
        {
          label: '充值挽留',
          prop: 'discount',
          render: (h, { row }) => {
            if (row.discount && row.discount !== '') {
              return <span>{row.discount} </span>
            } else {
              return <span>-</span>
            }
          },
          minWidth: 140
        },

        {
          label: '充值金额',
          prop: 'amount',
          align: 'right',
          width: '100',
          render: (h, { row }) => {
            return <span>{formatNumber(row.amount)} </span>
          }
        },

        {
          label: '喵币',
          prop: 'coin',
          align: 'right',
          render: (h, { row }) => {
            return <span>{formatNumber(row.coin)} </span>
          }
        },
        {
          label: '赠币',
          align: 'right',
          prop: 'free_coin',
          render: (h, { row }) => {
            return <span>{formatNumber(row.free_coin)} </span>
          }
        },
        {
          label: '支付完成时间',
          prop: 'pay_time',
          width: '120',
          render: (h, { row }) => {
            if (row.pay_time) {
              return (
                <span>
                  <p>{row.pay_time.split(' ')[0] || ''}</p>
                  <p>{row.pay_time.split(' ')[1] || ''}</p>
                </span>
              )
            }
          }
        },
        {
          label: '退款时间',
          prop: 'refund_time',
          width: '120',
          render: (h, { row }) => {
            if (row.refund_time) {
              return (
                <span>
                  <p>{row.refund_time.split(' ')[0] || ''}</p>
                  <p>{row.refund_time.split(' ')[1] || ''}</p>
                </span>
              )
            }
          }
        },
        {
          label: '退款金额',
          prop: 'refund_amount',
          width: '120',
          align: 'right',
          render: (h, { row }) => {
            if (row.refund_amount) {
              return <span>{formatNumber(row.refund_amount)}</span>
            }
          }
        },
        {
          label: '退款状态',
          prop: 'refund_status_title',
          width: '120',
          slotScope: true
        },
        {
          label: '退款单号',
          prop: 'dy_refund_no'
        },
        {
          label: '原因',
          prop: 'reason',
          width: 200,
          slotScope: true
        },
        {
          label: '充值短剧',
          prop: 'playlet_title'
        },
        {
          label: '充值合同',
          prop: 'main_playlet_title',
          width: 120
        },
        {
          label: '内容方',
          prop: 'partner_account_export',
          width: 120,
          slotScope: true
        },
        {
          label: '充值剧集',
          prop: 'chapter_title',
          width: '150'
        },
        {
          label: '操作人',
          prop: 'operator'
        }
      ],
      pigeonWeixinBelongsList: [],
      payTypeList: []
    }
  },
  computed: {
    ...mapState('common', ['miniAppList', 'orderTypeList', 'orderStatusList']),
    ...mapState('user', ['routerItem'])
  },
  created() {
    this.handleDyTable()
  },
  mounted() {
    if (this.$route.query.id) {
      this.requestData.order_no = [this.$route.query.id]
      this.orderTypeLabel = this.$route.query.id
      this.requestData.order_time_start = ''
      this.requestData.order_time_end = ''
    }
    this.initData()
    this.$AccessReport.report('zhangyu-order', [this.$store.state.user.routerItem.name, '订单管理', '退款订单'])
  },
  methods: {
    ...mapActions('common', ['requestMiniApp', 'requestCommonData']),
    ...mapActions('user', ['requestMiniApp']),
    async initData() {
      this.requestMiniApp()
      this.clickSearch()
      // this.requestChapter('')
      this.pigeonWeixinBelongsList = await this.requestCommonData({ type: 'pigeonWeixinBelongs' })
      this.payTypeList = await this.requestCommonData({ type: 'payType' })
    },
    handleDyTable() {
      if (this.routerItem && (this.routerItem.app_type == 1 || !this.routerItem.app_type)) {
        this.tableColums = this.tableColums.concat([
          {
            label: '道具ID',
            prop: 'prop_id',
            minWidth: 120
          },
          {
            label: '拼团ID',
            minWidth: 200,
            prop: 'team_id'
          }
        ])
        this.$set(this.defaultColumnList[0], 'children', this.defaultColumnList[0].children.concat([
          { name: 'prop_id', content: '道具ID', status: true },
          { name: 'team_id', content: '拼团ID', status: true }
        ]))
        this.$set(this.defaultColumn, 'center', this.defaultColumn.center.concat([
          'prop_id', 'team_id'
        ]))
      }
    },
    // 分销方
    distributorResult(value) {
      this.requestData.distributor_id = value
    },
    playletTypeChange() {
      this.requestData.main_playlet_id = []
      this.requestData.playlet_id = []
      this.isResize = true
      setTimeout(() => {
        this.isResize = false
      }, 200)
    },
    playletResult(value) {
      if (this.playletTypeValue === 'mainPlaylet') {
        this.requestData.main_playlet_id = value
      } else {
        this.requestData.playlet_id = value
      }
    },
    partnerAccountResult(value) {
      this.requestData.partner_account_id = value
    },
    // 执行这个重新获取焦点的方法 就可以了
    mobileClearChannel(async) {
      this.$nextTick(() => {
        if (!async) {
          // ios 手机有延迟问题
          setTimeout(() => {
            const { channel } = this.$refs
            const input = channel.$el.querySelector('.el-input__inner')
            input.removeAttribute('readonly')
          }, 200)
        }
      })
    },
    mobileClearplaylet(async) {
      this.$nextTick(() => {
        if (!async) {
          // ios 手机有延迟问题
          setTimeout(() => {
            const { playlet_id } = this.$refs
            const input = playlet_id.$el.querySelector('.el-input__inner')
            input.removeAttribute('readonly')
          }, 200)
        }
      })
    },
    // 导出
    exportList() {
      const list = this.tableColums.map((item) => item.prop)
      const data = {
        task_uri: `/api/admin/refund_order/list`,
        auto_column: list,
        ...this.requestData,
        mini_app_id: this.requestData.mini_app_id.length > 0 ? this.requestData.mini_app_id : localStorage.getItem('mini_app_id') ? [localStorage.getItem('mini_app_id')] : []
      }
      exportData(data).then((res) => {
        if (res.status_code === 1) {
          this.$message.success(res.msg)
        }
      })
    },
    setTableColumn(column) {
      this.$set(this, 'tableColums', [])
      setTimeout(() => {
        this.$set(this, 'tableColums', column)
        this.clickSearch()
      }, 10)
    },
    remoteMethod(query) {
      if (query !== '') {
        commonData({ type: 'channel', value: query, mini_app_id: localStorage.getItem('mini_app_id') ? localStorage.getItem('mini_app_id') : '' }).then((res) => {
          this.channelList = res.data.data
        })
      }
    },
    selectChange(query) {
      if (query !== '') {
        this.selectLoading = true
        this.requestChapter(query)
      }
    },
    requestChapter(query) {
      commonData({ type: 'playlet', value: query }).then((res) => {
        this.selectLoading = false
        this.playletList = res.data.data
      })
    },
    getSummaries(param) {
      const { columns, data } = param
      const sum = []
      columns.forEach((item, index) => {
        if (index === 0) {
          sum[index] = '汇总'
          return
        }
        if (item.property === 'amount') {
          sum[index] = formatNumber(this.totalAmount.totalAmount) + '元'
          return
        }
        if (item.property === 'refund_amount') {
          sum[index] = formatNumber(this.totalAmount.totalRefundAmount) + '元'
          return
        }
      })
      return sum
    },
    startSearch() {
      this.page_info.page = 1
      this.clickSearch()
    },
    showDetails(row) {
      this.drawer.row = row
      this.drawer.visible = true
    },
    miniAppResult(value) {
      this.requestData.mini_app_id = value
    },
    resultDateSeq(value) {
      this.requestData.seq_time_start = value.start_date
      this.requestData.seq_time_end = value.end_date
    },
    orderComplete(value) {
      this.requestData.pay_time_start = value.start_date
      this.requestData.pay_time_end = value.end_date
    },
    orderRefund(value) {
      this.requestData.refund_time_start = value.start_date
      this.requestData.refund_time_end = value.end_date
    },
    resultDate(value) {
      this.requestData.order_time_start = value.start_date
      this.requestData.order_time_end = value.end_date
    },
    clickSearch() {
      this.loading = true
      this.requestData.order_no = []
      this.requestData.trad_no = []
      this.requestData.member_id = ''

      if (this.orderTypeValue === 'member_id') {
        this.requestData[this.orderTypeValue] = this.orderTypeLabel
      } else {
        if (this.orderTypeLabel === '') {
          this.requestData[this.orderTypeValue] = []
        } else {
          this.requestData[this.orderTypeValue] = this.orderTypeLabel.split('，')
        }
      }
      refundOrderList({ ...this.requestData, ...this.page_info }).then((res) => {
        this.loading = false
        if (res.status_code === 1) {
          this.tableData = res.data.data
          this.page_info = res.data.page_info
          this.totalAmount = res.data.totalAmount
        }
      })
    },
    reset() {
      this.isResize = true
      setTimeout(() => {
        this.isResize = false
      }, 2000)
      this.$set(this, 'requestData', {
        order_no: [],
        trad_no: [],
        pay_time_start: '',
        pay_time_end: '',
        refund_time_start: '',
        refund_time_end: '',
        member_id: '',
        mini_app_id: '',
        // status: '',
        order_type: '',
        pay_type: '',
        // app_type: '',
        // channel_first_pay: '',
        // channel_id: '',
        playlet_id: [],
        main_playlet_id: [],
        // seq_playlet_id: '',
        weixin_blongs_id: '',
        partner_account_id: [],
        // seq_time_start: '',
        // seq_time_end: ''
        distributor_id: [],
        order_time_start: this.$moment().format('YYYY-MM-DD'),
        order_time_end: this.$moment().format('YYYY-MM-DD')
      })
      this.orderTypeLabel = ''
      this.orderTypeValue = 'order_no'
      this.$set(this, 'page_info', {
        page: 1,
        page_size: 20,
        total: 0
      })
    },
    add(title) {
      this.drawer.title = title
      this.drawer.row = {}
      this.drawer.visible = true
    },
    edit(row) {
      this.drawer.title = '编辑'
      this.drawer.row = row
      this.drawer.visible = true
    },
    delRow(row) {},
    handlePageChange(page) {
      this.page_info.page = page.page
      this.clickSearch()
    },
    onSubmit(data) {
      auto_reply_save(data).then((res) => {
        if (res.status_code === 1) {
          this.$message.success(res.msg)
        }
      })
    }
  }
}
</script>
  <style lang="scss" scoped>
.action-box {
  width: 100%;
}
.infoText {
  font-size: 12px;
  color: #999;
}
.redText {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ff4d4f;
}
p {
  margin: 3px 0;
}
.game-name {
  display: flex;
  align-items: center;
  .svg-icon-box {
  }
}
</style>
